<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webClient</title>
    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="./js/base64.js"></script>
    <script type="text/javascript" src="./js/all_0.9.14.js"></script>
    <script type="text/javascript" src="./js/application.js"></script>
    <script type="text/javascript" src="./js/uikit.js"></script>
    <script type="text/javascript" src="./js/uikit-icons.js"></script>
    <script type="text/javascript" src="./js/show_me_the_money.js"></script>
    <link rel="stylesheet" href="./css/uikit.css" type="text/css"/>
    <link rel="stylesheet" href="./css/wk.css" type="text/css"/>
    <link rel="stylesheet" href="./css/osk.css" type="text/css"/>
    <link rel="icon" href="favicon.ico">
</head>
<body>
<!-- Display -->
<div id="displayDIV" class="goodView"></div>
<div>
    <!-- 悬浮工具栏 -->
    <div class="svg-wrapper ufo">
        <svg height="40" width="220" xmlns="http://www.w3.org/2000/svg">
            <rect id="shape" height="40" width="220"/>
        </svg>
        <div>
            <span class="spot"></span>
            <ul class="uk-iconnav uk-navbar-center" id="ufo_nav_icon">
                <li><a href="#clipboard_modal" uk-icon="icon: file-edit" uk-tooltip="剪贴板" uk-toggle></a></li>
                <li><a href="#" uk-icon="icon: settings" uk-tooltip="虚拟键盘" id="osk_btn"></a></li>
                <li><a href="#" uk-icon="icon: move" uk-tooltip="恢复窗口" id="tab_btn"></a></li>
                <li><a href="#setting_menu" uk-icon="icon: cog" uk-tooltip="设置" uk-toggle></a></li>
                <li><a href="#side-video" uk-icon="icon: close" uk-tooltip="教程" uk-toggle></a></li>
            </ul>
        </div>
    </div>
    <!--end of 悬浮工具栏-->
    <!-- 侧边栏 -->
    <div id="setting_menu" uk-offcanvas>
        <div class="uk-offcanvas-bar">
            <button class="uk-offcanvas-close" type="button" uk-close></button>
            <!--            <span uk-icon="icon: info"></span>-->
            <!--            <p>自由、平等、公正、法治</p>-->
            <!--            <p>爱国、敬业、诚信、友善</p>-->
            <!--            <p>富强、民主、文明、和谐</p>-->
            <table class="uk-table uk-table-small uk-table-divider">
                <thead>
                <tr>
                    <th>ICON</th>
                    <th>功能说明</th>
                </tr>
                </thead>
                <tbody>
                <!--                <tr>-->
                <!--                    <td>-->
                <!--                        <span uk-icon="icon: server"></span>-->
                <!--                        &lt;!&ndash;                        <div uk-dropdown="animation: uk-animation-slide-top-small; duration: 500">&ndash;&gt;-->
                <!--                        &lt;!&ndash;                            <ul class="uk-list uk-margin-small">&ndash;&gt;-->
                <!--                        &lt;!&ndash;                                <li class="client_info">程序:暂无</li>&ndash;&gt;-->
                <!--                        &lt;!&ndash;                                <li class="tunnel_info">链路:暂无</li>&ndash;&gt;-->
                <!--                        &lt;!&ndash;                            </ul>&ndash;&gt;-->
                <!--                        &lt;!&ndash;                        </div>&ndash;&gt;-->
                <!--                    </td>-->
                <!--                    <td>连接状态</td>-->
                <!--                </tr>-->
                <tr>
                    <td><span uk-icon="icon: file-edit"></span></td>
                    <td>远端剪贴板<br>显示云应用中复制的文本内容;编辑保存后同步至云端剪贴板</td>
                </tr>
                <tr>
                    <td><span uk-icon="icon: settings"></span></td>
                    <td>打开/关闭虚拟键盘</td>
                </tr>
                <tr>
                    <td><span uk-icon="icon: move"></span></td>
                    <td>云应用最小化后<br>可恢复窗口</td>
                </tr>
                <!--                <tr>-->
                <!--                    <td><span uk-icon="icon: lock"></span></td>-->
                <!--                    <td>物理键盘锁定</td>-->
                <!--                </tr>-->
                <tr>
                    <td><span uk-icon="icon: cog"></span></td>
                    <td>设置</td>
                </tr>
                <tr>
                    <td>触控<span uk-icon="icon: touch"></span></td>
                    <td>
                        <div class="uk-margin-small">
                            <label for="lb1">
                                <input class="uk-radio" type="radio" name="radio2" value="touchScreenMode" id="lb1"
                                       checked>触屏模式</label>
                            <p>手指点击移动光标<br>长按触发右键<br>双击按住拖动</p>
                        </div>
                        <div class="uk-margin-small">
                            <label for="lb2">
                                <input class="uk-radio" type="radio" name="radio2" value="touchPadMode" id="lb2"
                                > 触摸板模式</label>
                            <p>手指触摸移动光标<br>双指点击触发右键<br>双击按住拖动</p>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--            <p>自由、平等、公正、法治</p>-->
            <!--            <p>爱国、敬业、诚信、友善</p>-->
            <!--            <p>富强、民主、文明、和谐</p>-->
        </div>
    </div>
    <!-- end of 侧边栏-->
    <!-- 侧边栏right -->
    <div id="side-video" uk-offcanvas="flip: true;bg-close:false">
        <div class="uk-offcanvas-bar">
            <button class="uk-offcanvas-close" type="button" uk-close></button>
            <iframe src="//player.bilibili.com/player.html?aid=463756163&bvid=BV1HL411g7Ad&cid=430615679&page=1"
                    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
            <iframe src="//player.bilibili.com/player.html?aid=463756163&bvid=BV1HL411g7Ad&cid=430615679&page=1"
                    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
            <iframe src="//player.bilibili.com/player.html?aid=463756163&bvid=BV1HL411g7Ad&cid=430615679&page=1"
                    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
        </div>
    </div>
    <!-- end of 侧边栏right-->
    <!-- clipboard_modal -->
    <div id="clipboard_modal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <h2 class="uk-modal-title">远端剪贴板</h2>
            <textarea class="uk-textarea" rows="5" placeholder="Textarea" id="clipboardTextarea"></textarea>
            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button" id="clp_cancel_btn">Cancel
                </button>
                <button class="uk-button uk-button-primary" type="button" id="clp_save_btn">Save</button>
            </p>
        </div>
    </div>
    <!--    end of clipboard_modal-->
    <!-- share_modal -->
    <div id="share_modal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <h2 class="uk-modal-title">分享Public文件</h2>
            <textarea class="uk-textarea" rows="5" placeholder="Example:Y:\folderName\file.doc"
                      id="shareFilePathTextarea"></textarea>
            <p class="uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close" type="button" id="share_cancel_btn">Cancel
                </button>
                <button class="uk-button uk-button-primary" type="button" id="share_save_btn">OK</button>
            </p>
        </div>
    </div>
    <!--    end of share_modal-->
    <!--载入进度条-->
    <div id="modal-full" uk-modal>
        <!--    <div id="modal-full" class="uk-modal-full uk-background-secondary" uk-modal>-->
        <div class="uk-modal-dialog">
            <!--            <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>-->
            <div class="">
                <div class="uk-padding-large">
                    <h1>——云应用平台——</h1>
                </div>
            </div>
            <div class="uk-padding">
                <span uk-spinner class="uk-margin"></span>
                <span id="text-status">载入中...</span>
                <progress id="js-progressbar" class="uk-progress" value="0" max="100" uk-tooltip="载入中..."></progress>
            </div>
        </div>
    </div>
    <!--end of 载入进度条-->
</div>
<script>
    // console.log("page log");

    function testFileUpload() {
        var obj = document.getElementById("t_file");
        var file = obj.files[0]
        console.log("ceswenjian shangchuan", file)
        console.log(G.client)
        var tunnel = G.client.createOutputStream()
        console.log(tunnel)
        tunnel.sendBlob(tunnel.index, file)
    }


</script>
</body>
</html>